<template>
	<view class="activity-315">
		<block v-if="show">
			<movable-area class="share">
				<movable-view direction="all" class="share-img">
					<image 
						src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/national-day/share.png?v=1" 
						@click="share">
					</image>
				</movable-view>
			</movable-area>
			<view class="tips" @click="goLottery">
				<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/315/enter.png" mode="widthFix"></image>
			</view>
			<view class="activity-315-pic1">
				<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/315/pic1.png" mode="widthFix"></image>
			</view>
			<view class="activity-315-pic2">
				<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/315/pic2.png?v=2" mode="widthFix"></image>
			</view>
			<view class="activity-315-module-1">
				<view class="activity-315-tit">
					<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/315/tit-1.png" mode="widthFix"></image>
				</view>
				<view class="activity-315-module-1-first" @click="goProInfo('315活动-查看爆款商品',first.goods_id)">
					<image :src="first.image" mode="aspectFit"></image>
					<view class="goods-info">
						<view class="goods-name">{{first.goods_name}}</view>
						<view class="market-price">原价：<text>￥<text>{{first.market_price}}</text></text></view>
						<!-- <view class="sales-price">零售价：<text>￥<text>3725</text></text></view> -->
						<view class="retail-price">零售价：<text>￥<text>{{first.retail_price}}</text></text></view>
					</view>
				</view>
				<view class="activity-315-module-1-list">
					<view class="activity-315-module-1-item" v-for="(data,index) in shelf1" :key="index" @click="goProInfo('315活动-查看爆款商品',data.goods_id)">
						<image :src="data.image"></image>
						<view class="goods-info">
							<view class="market-price">原价：<text>￥<text>{{data.market_price}}</text></text></view>
							<view class="goods-name">{{data.goods_name}}</view>
							<view class="btn-box">
								<view class="retail-price">到手价:<text>￥<text>{{data.retail_price}}</text></text></view>
								<view class="btn"><image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/315/btn.png" mode="widthFix"></image></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="activity-315-module-2">
				<view class="activity-315-tit">
					<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/315/tit-2.png" mode="widthFix"></image>
				</view>
				<view class="activity-315-module-2-list">
					<view class="activity-315-module-2-item" v-for="(data,index) in shelf2" :key="index" @click="goProInfo('315活动-随心换购商品',data.goods_id)">
						<image :src="data.image" mode="widthFix"></image>
						<view class="goods-info">
							<view class="market-price">原价：<text>￥<text>{{data.market_price}}</text></text></view>
							<view class="goods-name">{{data.goods_name}}</view>
							<view class="btn-box">
								<view class="retail-price">到手价:<text>￥<text>{{data.retail_price}}</text></text></view>
								<view class="btn"><image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/315/btn.png" mode="widthFix"></image></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="activity-315-module-3">
				<image class="bg" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/315/bg.png"></image>
				<view class="activity-315-tit">
					<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/315/tit-3.png" mode="widthFix"></image>
				</view>
				<view class="activity-315-module-3-list">
					<view class="activity-315-module-3-item" v-for="(data,index) in shelf3" :key="index" @click="goProInfo('315活动-查看套餐',data.goods_id)">
						<image 
							:src="data.image" 
							mode="widthFix"
							class="goods-image">
						</image>
						<view class="goods-price">
							<view class="market-price">原价{{data.market_price}}元</view>
							<view class="retail-price">
								<text style="display: inline-block; transform: skew(30deg);">到手价:<text>￥<text>{{data.retail_price}}</text></text></text>
							</view>
							<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/315/btn-1.png" class="btn-1"></image>
						</view>
						<view class="goods-name">{{data.goods_name}}</view>
					</view>
				</view>
			</view>
			<view class="activity-315-module-4">
				<view class="activity-315-tit">
					<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/315/tit-4.png" mode="widthFix"></image>
				</view>
				<view class="activity-315-module-4-content">
					<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/315/pic3.png"></image>
					<view class="activity-315-module-4-info">活动期间B27，B28，B35系列产品全场<text class="bg">95<text>折</text></text></view>
				</view>
			</view>
			<view class="activity-315-module-5">
				<view class="activity-315-tit">
					<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/315/tit-5.png" mode="widthFix"></image>
				</view>
				<view class="rule-box">
					<rich-text :nodes="rule"></rich-text>
				</view>
			</view>
		</block>
		<pt-loading></pt-loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				userInfo: '',
				rule: '<p>1、活动时间:仅限2021.3.1—2021.3.21关注有礼、全场疯狂折扣有效。</p><p>2、加200元随心换购，订单金额满10000元即可换购指定商品。</p><p>3、套餐以外增加的产品不享受折扣按照正价核算。</p><p>4、抽奖代金券使用规则订单满10000元可以使用200元代金券，订单满20000元可以使用500元代金券，活动产品及特价产品除外。</p><p>5、活动期间所有代金券使用期限截止到4月30日。</p>',
				posterImg: '',
				first: {},
				shelf1: [],
				shelf2: [],
				shelf3: []
			};
		},
		onLoad(options) {
			if(uni.getStorageSync('userInfo')){
				this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
			}
			if(options.parent_id || options.scene){
				// 如果用户从分享的小程序卡片或扫描二维码进来的,设置一个url缓存,登录后返回当前缓存url
				let pages = getCurrentPages();
				let curPage = pages[pages.length - 1];
				uni.setStorageSync('newurl',curPage.$page.fullPath)
			}
			if(options.parent_id){
				uni.setStorageSync('parent_id',options.parent_id)
				this.$u.api.binding_refer({id: options.parent_id}).catch(() => {
					// console.log('接口报错：绑定失败')
				})
			}
			let scene
			if(options.scene){
				scene = decodeURIComponent(options.scene)
				uni.setStorageSync('parent_id',this.filterUrlParam(scene).parent_id)
				this.$u.api.binding_refer({id: this.filterUrlParam(scene).parent_id}).catch(() => {
					console.log('接口报错：绑定失败')
				})
			}
		},
		onShow() {
			this.init()
			if(uni.getStorageSync('userInfo')){
				this.addFoot('查看315活动')
			}
		},
		methods: {
			// 解析小程序scene参数
			filterUrlParam(urlSearch){
			  let ret = {}
			  let regParam = /([^&=]+)=([\w\W]*?)(&|$|#)/g
			  if (urlSearch) {
			    var strParam = urlSearch;
			    var result
			    while ((result = regParam.exec(strParam)) != null) {
			      ret[result[1]] = result[2]
			    }
			  }
			  return ret
			},
			init(){
				this.$u.api.ActivityShelf({shelf_id: 116}).then(res => {
					this.show = true
					this.posterImg = res.datas.img
					this.first = JSON.parse(JSON.stringify(res.datas.shelf_list))[0].goods_list[0]
					this.shelf1 = JSON.parse(JSON.stringify(res.datas.shelf_list))[0].goods_list.splice(1)
					this.shelf2 = JSON.parse(JSON.stringify(res.datas.shelf_list))[1].goods_list
					this.shelf3 = JSON.parse(JSON.stringify(res.datas.shelf_list))[2].goods_list
					if(uni.getStorageSync('userInfo')){
						this.$u.mpShare = {
							title: res.datas.name,
							path: '/events/315?parent_id='+ JSON.parse(uni.getStorageSync('userInfo')).user_id,
							imageUrl: res.datas.image
						}
					}
				})
			},
			goLottery(){
				uni.navigateTo({
					animationDuration: 500,
					url: '/events/lottery'
				})
				if(uni.getStorageSync('userInfo')){
					this.addFoot('315活动-抽奖入口')
				}
			},
			share(){
				let pages = getCurrentPages();
				let curPage = pages[pages.length - 1];
				let url = encodeURIComponent(curPage.$page.fullPath)
				uni.navigateTo({
					animationDuration: 500,
					url: '/events/events-poster?posterImg='+encodeURIComponent(this.posterImg) + '&url='+ url + '&name=315活动'
				})
				if(uni.getStorageSync('userInfo')){
					this.addFoot('315活动-分享海报')
				}
			},
			goProInfo(where,goods_id){
				getApp().goProInfo(goods_id)
				if(uni.getStorageSync('userInfo')){
					this.addFoot(where)
				}
			},
			addFoot(where,goods_id){
				this.$u.api.AddFoot({
					// #ifdef MP-WEIXIN
					type: 1,
					// #endif
					// #ifdef APP-PLUS
					type: 2,
					// #endif
					// #ifdef H5
					type: 3,
					// #endif
					store_id: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:'',
					client: 1,
					where: where,
					stay_time: 0,
					goods_id: goods_id?goods_id:0,
					store_goods_id: 0,
					is_new: 1
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #ccfff0;
	}
	@keyframes scaleDraw {
		0%{
				transform: scale(1);  /*开始为原始大小*/
		}
		25%{
				transform: scale(1.2); /*放大1.1倍*/
		}
		50%{
				transform: scale(1);
		}
		75%{
				transform: scale(1.2);
		}
	}
	.activity-315{
		padding-bottom: 250rpx;
		.share{
			position: fixed !important;
			left: 0;
			top: 50rpx;
			bottom: 180rpx;
			left: 50rpx;
			right: 20rpx;
			pointer-events: none;
			z-index: 20;
			width: auto;
			height: auto;
			.share-img{
				position: absolute !important;
				width: 80rpx;
				height: 80rpx;
				pointer-events: auto;
				border-radius: 50%;
				top: initial;
				left: initial;
				right: 40rpx;
				bottom: 0;
				text-align: center;
				image{
					width: 80rpx;
					height: 80rpx;
				}
			}
		}
		.tips{
			position: fixed;
			bottom: 50rpx;
			right: 50rpx;
			z-index: 2;
			-webkit-animation-name: scaleDraw; /*关键帧名称*/
			-webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
			-webkit-animation-iteration-count: infinite;  /*动画播放的次数*/
			-webkit-animation-duration: 3s; /*动画所花费的时间*/
			image{
				width: 100rpx;
			}
		}
		.activity-315-pic1{
			image{
				width: 100%;
			}
		}
		.activity-315-pic2{
			padding-left: 22rpx;
			margin-top: -100rpx;
			image{
				width: 729rpx;
			}
		}
		.activity-315-module-1,.activity-315-module-2{
			width: 700rpx;
			background-image: linear-gradient(0deg, #16ABCF, #68C5C3, #18ACCF);
			border: 4rpx solid #3EC0DE;
			box-shadow: 0px 8rpx 0px 0px rgba(26, 161, 193, 0.24) inset;
			border-radius: 10rpx;
			margin: 70rpx auto 0;
			position: relative;
			padding-bottom: 20rpx;
			&::before{
				content: '';
				position: absolute;
				width: 100%;
				height: 100%;
				background-image: url(https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/315/line.png);
				background-size: 30rpx 31rpx;
				background-repeat: repeat;
				z-index: 0;
			}
			.activity-315-tit{
				text-align: center;
				image{
					width: 310rpx;
					margin-top: -10rpx;
				}
			}
			.activity-315-module-1-first{
				display: flex;
				background: #FBFBFB;
				border: 4rpx solid #3EC0DE;
				box-shadow: 0px 6rpx 16rpx 0px rgba(26, 172, 206, 0.32);
				border-radius: 10rpx;
				margin: 20rpx 20rpx 0;
				align-items: flex-start;
				padding: 20rpx;
				position: relative;
				z-index: 1;
				image{
					width: 280rpx;
					height: 280rpx;
					border-radius: 8rpx;
				}
				.goods-info{
					flex: 1;
					min-width: 0;
					margin-left: 20rpx;
					.goods-name{
						overflow : hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						font-size: 28rpx;
						line-height: 40rpx;
						height: 80rpx;
						margin-bottom: 50rpx;
					}
					.market-price{
						margin-top: 20rpx;
						font-size: 24rpx;
						text{
							color: #999;
							text-decoration: line-through;
							text{
								font-size: 24rpx;
							}
						}
					}
					.sales-price{
						margin-top: 20rpx;
						font-size: 24rpx;
						text{
							color: #141414;
							text{
								font-size: 26rpx;
							}
						}
					}
					.retail-price{
						margin-top: 20rpx;
						font-size: 24rpx;
						text{
							color: #FF7E57;
							text{
								font-size: 40rpx;
								font-weight: bold;
							}
						}
					}
				}
			}
			.activity-315-module-1-list,.activity-315-module-2-list{
				padding: 0 20rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				.activity-315-module-1-item,.activity-315-module-2-item{
					width: 310rpx;
					border-radius: 8rpx;
					overflow: hidden;
					background: #FBFBFB;
					border: 4rpx solid #3EC0DE;
					box-shadow: 0px 6rpx 16rpx 0px rgba(26, 172, 206, 0.32);
					margin-top: 30rpx;
					image{
						width: 310rpx;
						height: 310rpx;
						border-radius: 8rpx 8rpx 0 0;
					}
					.goods-info{
						padding: 20rpx 20rpx 0;
						position: relative;
						.market-price{
							line-height: 28rpx;
							padding: 0 20rpx;
							border-radius: 4rpx;
							background-color: #F9EA9A;
							font-size: 20rpx;
							color: #024275;
							position: absolute;
							text-decoration: line-through;
							top: -14rpx;
						}
						.goods-name{
							overflow : hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							font-size: 28rpx;
							line-height: 40rpx;
							height: 80rpx;
							margin-top: 10rpx;
						}
						.btn-box{
							display: flex;
							justify-content: space-between;
							align-items: center;
							padding: 20rpx 0 30rpx;
							.retail-price{
								white-space: nowrap;
								font-size: 24rpx;
								flex: 1;
								min-width: 0;
								text{
									color: #FF7E57;
									text{
										font-size: 36rpx;
										font-weight: bold;
									}
								}
							}
							.btn{
								image{
									width: 66rpx;
									height: 66rpx;
								}
							}
						}
					}
				}
			}
		}
		.activity-315-module-2{
			background: #458D4C;
			border-color: #5FAD67;
			.activity-315-tit{
				margin-top: -80rpx;
				image{
					width: 510rpx;
				}
			}
			.activity-315-module-2-list{
				.activity-315-module-2-item{
					border-color: #5FAD67;
				}
			}
		}
		.activity-315-module-3{
			position: relative;
			margin-top: 135rpx;
			padding: 0 0 90rpx;
			.bg{
				position: absolute;
				width: 100%;
				height: 100%;
				z-index: 0;
			}
			.activity-315-tit{
				text-align: center;
				image{
					width: 466rpx;
					margin-top: -100rpx;
				}
			}
			.activity-315-module-3-list{
				padding: 0 25rpx;
				position: relative;
				z-index: 1;
				.activity-315-module-3-item{
					margin-top: 50rpx;
					background-color: #FFE1AD;
					border: 4rpx solid #64C7DF;
					box-shadow: 0px 4rpx 0px 0px #1AABC7 inset;
					border-radius: 20rpx;
					padding: 20rpx;
					.goods-image{
						width: 100%;
						padding-top: 20rpx;
						background-color: #FFF;
						border-radius: 10rpx;
						vertical-align: top;
					}
					.goods-price{
						display: inline-flex;
						align-items: center;
						position: relative;
						left: 50%;
						transform: translateX(-50%);
						top: -30rpx;
						.market-price{
							background: #1EAED0;
							border: 2rpx solid #F7E7C7;
							box-shadow: 0px 11rpx 9rpx 0px rgba(0, 0, 0, 0.2) inset;
							border-radius: 30rpx 0px 0px 30rpx;
							line-height: 60rpx;
							padding: 0 53rpx 0 37rpx;
							font-size: 24rpx;
							color: #F9EA9A;
							text-decoration: line-through;
						}
						.retail-price{
							line-height: 60rpx;
							background: #FF7E57;
							box-shadow: 0px 11px 9px 0px rgba(0, 0, 0, 0.2) inset;
							border-radius: 0 60rpx 30rpx 0;
							transform: skew(-30deg);
							margin-left: -30rpx;
							border-left: solid 2px #FFF;
							padding-right: 65rpx;
							padding-left: 30rpx;
							font-size: 24rpx;
							color: #FFF;
							text{
								text{
									text{
										font-size: 36rpx;
									}
								}
							}
						}
						.btn-1{
							width: 70rpx;
							height: 70rpx;
							position: absolute;
							right: -15rpx;
						}
					}
					.goods-name{
						text-align: center;
						padding-bottom: 20rpx;
						font-size: 24rpx;
						line-height: 42rpx;
						padding: 0 30rpx;
					}
				}
			}
		}
		.activity-315-module-4{
			width: 700rpx;
			margin: 80rpx auto 0;
			background: linear-gradient(0deg, #68C5C3,#16ABCF);
			border: 4rpx solid #3EC0DE;
			box-shadow: 0px 4rpx 0px 0px rgba(26, 161, 193, 0.24);
			border-radius: 10rpx;
			.activity-315-tit{
				text-align: center;
				image{
					width: 430rpx;
					margin-top: -100rpx;
				}
			}
			.activity-315-module-4-content{
				padding: 20rpx;
				display: flex;
				align-items: flex-start;
				image{
					width: 145rpx;
					height: 145rpx;
					border-radius: 8rpx;
					border: solid 4rpx #119cc3;
				}
				.activity-315-module-4-info{
					flex: 1;
					min-width: 0;
					margin-left: 20rpx;
					color: #FFF;
					line-height: 54rpx;
					text.bg{
						display: inline-block;
						vertical-align: middle;
						line-height: 52rpx;
						background: linear-gradient(0deg, #04495C,#119CC3);
						border-radius: 4rpx;
						font-size: 44rpx;
						color: #ffdfc3;
						padding: 0 20rpx;
						margin-left: 10rpx;
						text{
							font-size: 27rpx;
							margin-left: 5rpx;
						}
					}
				}
			}
		}
		.activity-315-module-5{
			width: 700rpx;
			margin: 50rpx auto 0;
			background: #4E9C56;
			border: 5rpx solid #F0D9A7;
			box-shadow: 0px 9rpx 35rpx 0px rgba(0, 0, 0, 0.24) inset;
			border-radius: 10rpx;
			.activity-315-tit{
				text-align: center;
				image{
					margin-top: -4rpx;
					width: 254rpx;
				}
			}
			.rule-box{
				padding: 30rpx;
				color: #DDE5C2;
				font-size: 22rpx;
				line-height: 52rpx;
			}
		}
	}
</style>
